// 1. 引入路由的api
import {createRouter, createWebHashHistory} from 'vue-router'
// 2. 引入页面
const Home = ()=> import('@/views/Home.vue')
const About = ()=> import('@/views/About.vue')
const NotFound = ()=>import('@/views/404.vue')
const ElementTest=()=>import('../views/ElementTest.vue')
const ListDemo=()=>import('../views/ListDemo.vue')
// 3. 配置路由配置
const routeConfig = [
    {
        path:'/home',
        component: Home,
        name:'home'
    },
    {
        path:'/about',
        component: About,
        name:'about'
    },
    {
        path:'/:pathMatch(.*)*', // 
        name:'not found',
        component: NotFound
    },
    {
        path:'/element', 
        name:'element',
        component: ElementTest
    },
    {
        path:'/list-demo', 
        name:'listDemo',
        component: ListDemo
    }
]

// 4. 创建路由实例化对象，并对外暴露
const router = createRouter({
    history: createWebHashHistory(), // 使用 hash模式
    routes: routeConfig
})
// 全局前置守卫
router.beforeEach((to,from)=>{
    console.log('to',to);
    console.log('from',from);
    
})

// 全局后置守卫
router.afterEach((to,from)=>{
    console.log('to===',to);
    console.log('from====',from);
})



export default router